import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    ImageBackground,
} from 'react-native';
import config from '../../../config';
import { deviceInfo } from '../../../utils/deviceInfo';
import DocItem from './DocItem';
import { dateFormat } from '../../../utils/timeUtils';

import imgBook from '../../../images/bg_book.jpeg';
import imgDesign from '../../../images/bg_design.jpeg';

const HOST = 'https://www.yuque.com'

const styles = StyleSheet.create({
    container: {
        marginHorizontal: 15,
        borderRadius: 2,
        borderColor: config.borderColor,
        backgroundColor: '#fff',
    },
    image: {
        width: deviceInfo.deviceWidth - 30,
        height: (deviceInfo.deviceWidth - 30) * 768 / 1366,
        borderTopLeftRadius: 2,
        borderTopRightRadius: 2,
        justifyContent: 'flex-end',
    },
    cardContent: {
        padding: 10,
        backgroundColor: 'rgba(0,0,0,0.5)',
    },
    title: {
        color: '#fff',
        fontSize: config.defaultFontSize,
        opacity: 0.9,
    },
    subTitle: {
        color: '#fff',
        fontSize: config.smallFontSize,
        marginTop: 4,
        opacity: 0.7,
    },
    itemBorder: {
        width: '100%',
        height: 8,
        // backgroundColor: config.backgroundColor,
        opacity: 0.5,
    },
});

export default class RepoCard extends React.PureComponent {

    _renderDocs() {
        const { repo, docs, onDocPress } = this.props
        const urlPrefix = `${HOST}/${repo.namespace}`

        if (docs == null || docs.length == 0) {
            return
        }

        return (
            <View style={{ backgroundColor: '#fff', }} >
                {docs.map((item, index) => {
                    return (
                        // eslint-disable-next-line react/jsx-key
                        <View key={item.id}>
                            <DocItem
                                onPress={() => onDocPress && onDocPress(item, `${urlPrefix}/${item.slug}`)}
                                subTitle={item.description ? item.description : '暂无描述'}
                                timeStr={dateFormat('mm月dd日', new Date(item.content_updated_at))}
                                title={item.title}
                            />
                            {index < docs.length - 1 && <View style={styles.itemBorder} />}
                        </View>
                    )
                }
                )}
            </View>
        )
    }

    render() {
        const { name, description, type } = this.props.repo
        return (
            <View style={styles.container}>
                <ImageBackground source={type == 'Design' ? imgDesign : imgBook} style={styles.image} >
                    <View style={styles.cardContent}>
                        <Text style={styles.title}>{name}</Text>
                        <Text style={styles.subTitle}>{description}</Text>
                    </View>
                </ImageBackground>

                {this._renderDocs()}
            </View>
        )
    }
}